<template>
  <view class="previewImage" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" v-if="show" @tap="close" @touchmove.stop.prevent>
		<swiper class="swiper" :current="index" @change="swiperChange" :disable-touch="swiper" :circular="circular" :autoplay="false">
      <swiper-item v-for="(img, i) in imgs" :key="'swiper-item-'+i" :id="'swiper-item-'+i">
        <movable-area class="marea" scale-area>
          <movable-view
              :id="'movable-view-'+i"
              :key="'movable-view-'+i"
              class="mview"
              direction="all"
              :out-of-bounds="false"
              :inertia="true"
              damping="90"
              friction="2"
              scale="true"
              scale-min="1"
              scale-max="4"
              :scale-value="scale"
              @change="movableChange"
          >
            <image
                v-if="img.type == 'transmitImage' || img.type == 'image'"
                :id="'image-'+i"
                :key="'movable-view'+i"
                class="image"
                :src="img.url"
                :style="{ transform: 'rotateZ(' + deg + 'deg)' }"
                :data-index="i"
                :data-src="img.url"
                mode="widthFix"
                @touchmove="handletouchmove"
                @touchstart="handletouchstart"
                @touchend="handletouchend"
            />
            <view :key="'movable-view'+i"
                  style="width: 100%"
                  :id="'video-'+i"
                  v-else>
              <view style="position:relative;width:100%" v-if="!videoPlayer.visible">
                <image
                    :src="img.cover"
                    style="width: 100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)"
                    mode="widthFix"

                >
                </image>
                <i class="icon icon-bofang"
                   :data-src="img.url"
                   @click.stop="playVideo"
                   style="color: #fff;font-size: 80rpx;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1"></i>
              </view>
              <video
                  v-if="videoPlayer.visible"
                  :id="'video-'+i"
                  :key="'movable-view'+i"
                  :style="{ transform: 'rotateZ(' + deg + 'deg)' }"
                  :data-index="i"
                  class="image"
                  @touchmove="handletouchmove"
                  @touchstart="handletouchstart"
                  @touchend="handletouchend"
                  :src="img.url"
                  :data-src="img.url"
                  object-fit="cover"
                  :autoplay="true"
                  @ended="endplay"
              >
              </video>
            </view>
          </movable-view>
        </movable-area>
      </swiper-item>
    </swiper>
    <view class="page" v-if="JSON.parse(JSON.stringify(imgs)).length > 0">
      <text class="text">{{ index + 1 }} / {{ imgs.length }}</text>
    </view>
    <view class="save" v-if="saveBtn" @click.stop.prevent="save"><text class="text">{{ $t('home.btn_save')}}</text></view>
    <view class="rotate" v-if="rotateBtn" @click.stop.prevent="rotate"><text class="text">{{ $t('home.rotate_btn') }}</text></view>
  </view>
</template>

<script>
export default {
  name: 'ksj-previewImage', //插件名称
  props: {
    imgs: {
      //图片列表
      type: Array,
    },
    descs: {
      //描述列表
      type: Array,
      required: false,
      default: () => {
        return [];
      }
    },
    //透明度,0到1之间。
    opacity: {
      type: Number,
      default: 0.8
    },
    //保存按键
    saveBtn: {
      type: Boolean,
      default: true
    },
    //旋转按键
    rotateBtn: {
      type: Boolean,
      default: true
    },
    //循环预览
    circular:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      swiper:false,//是否禁用
      show: false, //显示状态
      index: 0, //当前页
      deg: 0, //旋转角度
      time: 0, //定时器
      interval: 1000, //长按事件
      scale: 1 ,//缩放比例
      videoPlayer: {
        visible: false,
        context: {},
        url: ''
      },    
    };
  },
  methods: {
    //比例变化
    onScale(e) {

    },
    //长按事件相关内容---------开始-------------------
    //接触开始
    handletouchstart(e) {
      var tchs = e.touches.length;
      if (tchs != 1) {
        return false;
      }
      this.time = setTimeout(() => {
        this.onLongPress(e);
      }, this.interval);
      return false;
    },
    //清除定时器
    handletouchend() {
      clearTimeout(this.time);
      if (this.time != 0) {
        //处理点击时间
      }
      return false;
    },
    //清除定时器
    handletouchmove() {
      clearTimeout(this.time);
      this.time = 0;
    },
    playVideo(e) {
      console.log(e)
      this.videoPlayer.context = uni.createVideoContext('videoPlayer', this);
      this.videoPlayer.visible = true;
      this.videoPlayer.url = e.currentTarget.dataset.src;
      console.log(this.videoPlayer.url)
      this.$nextTick(() => {
        this.videoPlayer.context.requestFullScreen({
          direction: 0
        })
        this.videoPlayer.context.play();
      });
    },
    // 处理长按事件
    onLongPress(e) {
      var src = e.currentTarget.dataset.src;
      var index = e.currentTarget.dataset.index;
      var data = { src: src, index: index };
      this.$emit('longPress', data);
    },
    //长按事件相关内容---------结束-------------------

    //图片改变
    swiperChange(e) {
      this.videoPlayer.visible = false
				console.log(e)
      this.index = e.detail.current; //更新当前图片index
		
      this.$nextTick(function() {
        this.scale = 1;
      })


      //this.deg = 0; //旋转角度
      //this.swiper=true;
    },
    //视频播放结束
    endplay() {
      this.videoPlayer.visible = false
    },

    //移动变化
    movableChange(e) {
      //console.log(e);
      /* if(this.old.scale <= 1){
        this.swiper=false;
      }else if(e.detail.x===0){
        this.swiper=false;
      } */
    },


    //保存
    save(e) {
      var _this = this;
      var src = this.imgs[this.index].url;
      //#ifdef MP-WEIXIN
      //提前向用户发起授权请求
      uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success() {
          console.log('kxj-previewImage:允许储存');
          _this.downloadImg(src);
        }
      });
      //#endif

      //#ifdef APP-PLUS
      this.downloadImg(src);
      //#endif

      //#ifdef H5
      //非同源图片将直接打开
      var abtn = document.createElement('a');
      abtn.href = src;
      abtn.download = '';
      abtn.target = '_blank';
      abtn.click();
      //#endif
    },

    //下载并保存文件
    downloadImg(src) {
      //下载图片文件
      uni.showLoading({
        title: this.$t('chat.is_saving')
      });
      uni.downloadFile({
        url: src,
        success: (res)=> {
          console.log(this.$t('mine.save_success'));
          uni.hideLoading();
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: this.$t('chat.has_save_to_album'),
                duration: 1000
              });
            }
          });
        },
        fail: function() {
          uni.hideLoading();
          uni.showToast({
            title: '图片下载失败',
            icon: 'none',
            duration: 1000
          });
        }
      });
    },

    //旋转
    rotate(e) {
      this.deg = this.deg == 270 ? 0 : this.deg + 90;
    },
    //打开
    open(e) {
			console.log('和宿风的官方独家曝光')
      if (e === null || e === '') {
        console.log('kxj-previewImage:打开参数无效');
        return;
      }

      if (!isNaN(e)) {
        if(e>=this.imgs.length){
          console.log('kxj-previewImage:打开参数无效');
        }else{
          this.index = e;
        }
      } else {
        var index = -1
        this.imgs.forEach((item,idx)=> {
          if(item.url == e){
            index = idx
          }
        })
        //var index = this.imgs.indexOf(e);
        if(index===-1){
          this.imgs = [e];
          this.index = 0;
          console.log('kxj-previewImage:未在图片地址数组中找到传入的图片，已为你自动打开单张预览模式')
        }else{
          //this.index = this.imgs.indexOf(e);
          this.index = index
        }
      }
      console.log('kxj-previewImage:当前预览图片序号'+this.index);
      this.show = true;
    },
    //关闭
    close(e) {
			console.log('关闭')
      this.show = false;
      this.index = 0; //当前页
      this.deg = 0; //旋转角度
      this.time = 0; //定时器
      this.interval = 1000; //长按事件
      this.scale = 1; //缩放比例
			this.$emit('closePreview')
    }
  }
};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
.previewImage {
  z-index: 999999999999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  user-select: none;
.swiper {
  width: 100%;
  height: 100%;
.marea {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: hidden;
.mview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 100%;
.image {
  width: 100%;
}
}
}
}

.page {
  position: absolute;
  width: 100%;
  bottom: 100rpx;
  text-align: center;
.text {
  color: #fff;
  font-size: 26rpx;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 3rpx 16rpx;
  border-radius: 20rpx;
  user-select: none;
}
}
.save {
  position: absolute;
  left: 10rpx;
  width: 200rpx;
  height: 56rpx;
  bottom: 100rpx;
  text-align: center;
  padding: 10rpx;
.text {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30rpx;
  border-radius: 20rpx;
  border: 1rpx solid #f1f1f1;
  padding: 6rpx 22rpx;
  user-select: none;
}
.text:active {
  background-color: rgba(100, 100, 100, 0.5);
}
}
.rotate {
  position: absolute;
  right: 10rpx;
  width: 200rpx;
  height: 56rpx;
  bottom: 100rpx;
  text-align: center;
  padding: 10rpx;
.text {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30rpx;
  border-radius: 20rpx;
  border: 1rpx solid #f1f1f1;
  padding: 6rpx 22rpx;
  user-select: none;
}
.text:active {
  background-color: rgba(100, 100, 100, 0.5);
}
}
.desc {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 5rpx 10rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 28rpx;
  letter-spacing: 3rpx;
  user-select: none;
}
}
</style>
